<template>
  <div>
    <el-dialog
      @closed="handleClose"
      :visible.sync="AddStatusDialog"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="添加状态"
      :close-on-click-modal="false"
    >
      <el-tabs :tab-position="tabPosition" class="tabHight">
        <el-tab-pane label="详情">
          <el-form
            :model="statusdForm"
            :rules="rules"
            ref="statusdForm"
            label-width="80px"
            class="tabHight_auto"
            size="mini"
          >
            <el-form-item label="Token" prop="statusToken">
              <el-input
                v-model="statusdForm.statusToken"
                placeholder="请输入Token"
              ></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="statusName">
              <el-input
                v-model="statusdForm.statusName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态码" prop="statusCode">
              <el-input
                v-model="statusdForm.statusCode"
                placeholder="请输入状态码"
              ></el-input>
            </el-form-item>
            <el-form-item label="颜色" prop="background_color">
              <div class="content-picker">
                <el-color-picker
                  popper-class="custom-color-picker"
                  :predefine="predefineColors"
                  v-model="statusdForm.background_color"
                >
                </el-color-picker>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="元数据">
          <MetaData
            ref="upoadMetaData"
            :editmetaData="editmetaData"
            :isedit="isedit"
            @sendmetaDatas="sendmetaData"
          />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button
          :loading="btnLoading"
          size="mini"
          type="primary"
          @click="submitForm('statusdForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MetaData from "../../opensite/metaData.vue";
import { addDeviceState } from "@/api/deviceType";
import { PREDEFINE_COLORS } from "@/utils/local";
export default {
  components: {
    MetaData,
  },
  props: {
    deviceTypeToken: {
      type: String,
      default: "",
    },
    AddStatusshow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const isNum = (rule, value, callback) => {
      const price = /^[0-9]*$/;
      if (!price.test(value)) {
        callback(new Error("状态码只能为数字"));
      } else {
        callback();
      }
    };
    return {
      btnLoading: false,
      predefineColors: PREDEFINE_COLORS,
      tabPosition: "left",
      AddStatusDialog: false,
      statusdForm: {
        statusName: "",
        statusToken: "",
        statusCode: "",
        background_color: "",
        borderColor: "#DCC9C9",
        foregroundColor: "#DCCDCD",
        icon: "",
      },
      rules: {
        statusName: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        statusToken: [
          { required: true, message: "请输入Token", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        statusCode: [
          { required: true, message: "请输入状态码", trigger: "blur" },
          { validator: isNum, message: "", trigger: "blur" },
        ],
        background_color: [
          { required: true, message: "请选择颜色", trigger: "change" },
        ],
      },
      isedit: false,
      editmetaData: [],
      metaDataJson: {},
      // deviceTypeToken: this.$route.query.deviceTypeToken,
    };
  },
  watch: {
    AddStatusshow(oldVal, newVal) {
      this.AddStatusDialog = this.AddStatusshow;
    },
  },
  methods: {
    // 关闭
    handleClose() {
      this.$emit("changeShow", "false");
      this.statusdForm = {
        statusName: "",
        statusToken: "",
        statusCode: "",
        background_color: "",
        borderColor: "#DCC9C9",
        foregroundColor: "#DCCDCD",
        icon: "",
      };
      this.$refs.upoadMetaData.clearMeteDada();
    },
    // 提交
    submitForm(statusdForm) {
      this.$refs[statusdForm].validate((valid) => {
        if (valid) {
          let formData = {};
          formData.token = this.statusdForm.statusToken;
          formData.name = this.statusdForm.statusName;
          formData.code = this.statusdForm.statusCode;
          formData.deviceTypeToken = this.deviceTypeToken;
          formData.backgroundColor = this.statusdForm.background_color;
          formData.borderColor = this.statusdForm.borderColor;
          formData.foregroundColor = this.statusdForm.foregroundColor;
          formData.icon = this.statusdForm.icon;
          formData.metadata = this.metaDataJson;
          this.btnLoading = true;
          addDeviceState(formData, this.deviceTypeToken)
            .then((res) => {
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.$emit("updateDeviceStatusList");
              this.AddStatusDialog = false;
              this.statusdForm = {
                statusName: "",
                statusToken: "",
                statusCode: "",
                background_color: "",
                borderColor: "#DCC9C9",
                foregroundColor: "#DCCDCD",
                icon: "",
              };
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      this.statusdForm = {
        statusName: "",
        statusToken: "",
        statusCode: "",
        background_color: "",
        borderColor: "",
        foregroundColor: "",
        icon: "",
      };
      this.$refs.upoadMetaData.clearMeteDada();
      this.AddStatusDialog = false;
    },
    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },
  },
};
</script>


<style lang="less">
.content-picker {
}
.el-color-picker__panel {
  width: 320px !important;
}
.custom-color-picker {
  .el-color-predefine {
    width: 350px !important;
  }
  .el-input__inner,
  .el-color-dropdown__link-btn,
  .el-color-dropdown__main-wrapper {
    display: none !important;
  }
  .el-color-predefine__color-selector {
    margin: 8px 10px !important;
    height: 25px !important;
    width: 25px !important;
  }
}
</style>